<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>会议室预定/签到</el-breadcrumb-item>
            <el-breadcrumb-item>取消预定</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card>
            <el-table :data="tableData">
                <el-table-column label="会议室" prop="cid" width=150px></el-table-column>
                <el-table-column label="会议人数" prop="peopleCount" width=150px></el-table-column>
                <el-table-column label="开始时间" prop="startTime" width=200px></el-table-column>
                <el-table-column label="结束时间" prop="endTime" width=200px></el-table-column>
                <el-table-column label="创建时间" prop="createTime" width=200px ></el-table-column>
                <el-table-column label="签到状态" width=150px>
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.status=='未签到'" size=mini @click="signIn(scope.row)">签到</el-button>
                        <el-button v-else size=mini @click="signed">已签到</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="取消预定" width=150px>
                    <template slot-scope="scope">
                        <template v-if="scope.row.status=='未签到'">
                            <el-button size=mini @click="cancelBook(scope.row)">取消预定</el-button>
                        </template>
                        <template v-else>
                            <span>已签到，不可取消</span>
                        </template>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total"
                    @current-change="page">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageSize: 1,
                total: 1,
                tableData: null,
                data:null
            }
        },

        created() {
            this.getList()
        },
        methods: {
            getList(){
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/orderrecord/getRecordsPage",
                    params:{
                        uid:window.sessionStorage.getItem("id"),
                        current:0,
                        size:5
                    }
                }).then(res=>{
                    console.log(res)
                    this.tableData = res.data.data.records
                    console.log(this.tableData)
                    this.pageSize = res.data.data.size
                    console.log(this.pageSize)
                    let total = res.data.data.total
                    // console.log(res.data.data.total)
                    this.totalNumber = total
                    // console.log(this.totalNumber)
                })

            },
            async page(currentPage){
                console.log(currentPage)
                let current = currentPage
                this.$axios({
                    method:"post",
                    url:"http://localhost:80/orderrecord/getRecordsPage",
                    params:{
                        uid:window.sessionStorage.getItem("id"),
                        current:current,
                        size:5
                    }
                }).then(res=>{
                    // console.log(res)
                    this.tableData = res.data.data.records
                    // console.log(this.tableData)
                    this.pageSize = res.data.data.size
                    console.log(res.data.data)
                    let total = res.data.data.total
                    this.totalNumber = total
                })
                // console.log(res)
            },
            signIn(row) {
                this.data = row;
                this.data.oId = row.oid
                this.data.o_id = row.oid
                console.log(row)
                console.log(this.data)
                this.$axios(
                    {
                        method:"post",
                        url:"http://localhost:80/orderrecord/SignIn",
                        params:this.data
                    }).then(res =>{
                        console.log(res)
                    if (res.data.msg==="success")
                        this.$message.success('签到成功 ！')
                    else
                        this.$message.error(res.data.msg)
                })
                // this.$http.put('/orderrecord/SignIn', row).then(resp => {
                //     if (resp.data == 'notTime') return this.$message.warning('未到签到时间 ！')
                //     else if (resp.data == 'error') return this.$message.error('已经超过签到时间 ！')
                //     this.$message.success('签到成功 ！')
                //     window.location.reload()
                // })

            },
            cancelBook(row) {
                this.data = row;
                this.data.oId = row.oid
                this.data.o_id = row.oid
                this.$confirm('此操作将永久删除该预定记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log('试图删除！')
                    this.$axios({
                        method:"post",
                        url:"http://localhost:80/orderrecord/remove",
                        params: this.data
                    }).then(res =>{
                        console.log(res)
                        if (res.data.msg==="取消成功")
                            this.$message.success("取消成功")
                        else
                            this.$message.error(res.data.msg)
                    })
                    // axios.delete('http://localhost:8181/orderrecord/cancelBook/', {data: row}).then(resp => {
                    //     if(resp.data == 'error') {
                    //         return this.$message.error('会议室已经可以使用，不可取消 ！')
                    //     }
                    //     this.$alert('删除成功！', '消息', {
                    //         confirmButtonText: '确定',
                    //         callback: action => {
                    //             window.location.reload()
                    //         }
                    //     })
                    // })


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除 !'
                    });
                });
            },
            signed() {
                this.$message.info('已签到，不可修改！')
            }
        },
    };
</script>

<style lang="less" scoped>
</style>
